<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="ruleForm.contactPerson"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="ruleForm.province"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="有效"></el-radio>
            <el-radio label="阻止"></el-radio>
          </el-radio-group>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
 export default {
    data() {
      return {
        ruleForm: {
          name: '',
          contactPerson: '',
          contactPhone: '', 
          address:'',
          status: '',
          province: '',
          city: ''  
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          contactPerson: [
            { required: true, message: '请输入联系人', trigger: 'change' }
          ],
          contactPhone: [
            { required: true, message: '请输入联系电话', trigger: 'change' }
          ], 
          address: [
            { required: true, message: '请输入详细地址', trigger: 'change' }
          ],
          status: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          province: [
            {  required: true, message: '请添在地图上添加标注', trigger: 'change' }
          ],
          city: [
            {  required: true, message: '请添在地图上添加标注', trigger: 'change' }
          ],
        }
      };
    },
    mounted(){
      //加载
      console.log(1);
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  } 
</script>
<style lang="less" scoped>
.demo-ruleForm{
  text-align: left;
}
</style>
